<template>
  <div class="warehouse-wrapper">
    <div class="controls">
      <button @click="zoom(1.2)">放大</button>
      <button @click="zoom(0.8)">缩小</button>
      <span>缩放比例: {{ (scale * 100).toFixed(0) }}%</span>

    </div>

    <div
      class="viewport"
      ref="viewport"
      @mousedown="startDrag"
      @mousemove="handleDrag"
      @mouseup="endDrag"
      @wheel.prevent="handleWheel"
    >
      <div class="shelf-container" :style="containerStyle">
        <!-- {{ visiblePositions }} -->
        <!-- 虚拟滚动优化，只渲染可视区域 -->
     
        <div
          v-for="pos in positions"
          :key="pos.fictitiousPosition"
          class="goods-item"
          :class="getItemClass(pos)"
          :style="getItemStyle(pos)"
          @click="handleClick(pos)"
        >
          <div class="item-label">
            <span v-if="pos.type == '4'">
              {{ pos.fictitiousPosition }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "JarShowIn",
  props: {
    positions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      scale: 1,
      translateX: 0,
      translateY: 0,
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      viewportSize: { width: 0, height: 0 },
    };
  },
  computed: {
    // 转换后的样式
    containerStyle() {
      console.log(`translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`, '哈哈哈哈哈哈或')
      return {
        transform: `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,
      };
    },

    // 可视区域计算（关键优化）
    visiblePositions() {
      const viewX = -this.translateX / this.scale;
      const viewY = -this.translateY / this.scale;
      const viewWidth = this.viewportSize.width / this.scale;
      const viewHeight = this.viewportSize.height / this.scale;

      console.log(
        viewX,viewY, viewWidth, viewHeight,
      //   this.positions.filter(pos => {
      //   // m.map(pos => {
      //   // console.log(pos, ' h哈哈哈哈哈哈或或')
      //   const x = Number(pos.x);
      //   const y = Number(pos.y);
      //   return (
      //     x < viewX + viewWidth + 50 && // +50 预加载缓冲区
      //     x + 1000 > viewX - 50 && // 假设货位宽度约100px
      //     y < viewY + viewHeight + 50 &&
      //     y + 50 > viewY - 50 // 假设高度约50px
      //   );
      //   // })
      // }), 
      'pppppppppp------------', this.positions.length)

      return this.positions.filter(pos => {
        // m.map(pos => {
        // console.log(pos, ' h哈哈哈哈哈哈或或')
        const x = Number(pos.x);
        const y = Number(pos.y);
        return  true
        // (
        //   x < viewX + viewWidth + 50 && // +50 预加载缓冲区
        //   x + 1000 > viewX - 50 && // 假设货位宽度约100px
        //   y < viewY + viewHeight + 50 &&
        //   y + 50 > viewY - 50 // 假设高度约50px
        // );
        // })
      });
    },
  },
  mounted() {
    console.log(this.positions);
    this.updateViewportSize();
    window.addEventListener("resize", this.updateViewportSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateViewportSize);
  },
  methods: {
    // 样式生成方法
    getItemStyle(pos) {
      console.log(pos.x, pos.y, 'pppppppp')
      return {
        left: `${pos.x * 25}px`,
        top: `${pos.y * 25}px`,
        width: "25px",
        height: "25px",
      };
    },

    // 状态样式
    getItemClass(pos) {
      console.log(pos.status === "occupied", pos.status === "reserved", [`type-${pos.type}`], 'zeep')
      return {
        occupied: pos.status === "occupied",
        reserved: pos.status === "reserved",
        [`type-${pos.type}`]: true,
      };
    },

    // 视窗尺寸更新
    updateViewportSize() {
      console.log()
      this.viewportSize = {
        width: this.$refs.viewport.offsetWidth,
        height: this.$refs.viewport.offsetHeight,
      };
    },

    // 缩放控制
    zoom(factor) {
      this.scale *= factor;
      this.scale = Math.min(Math.max(this.scale, 0.2), 5);
      // 最大八倍
    },

    // 拖拽逻辑
    startDrag(e) {
      this.isDragging = true;
      this.dragStartX = e.clientX - this.translateX;
      this.dragStartY = e.clientY - this.translateY;
    },

    handleDrag(e) {
      if (!this.isDragging) return;
      this.translateX = e.clientX - this.dragStartX;
      this.translateY = e.clientY - this.dragStartY;
    },

    endDrag() {
      this.isDragging = false;
    },

    // 滚轮缩放
    handleWheel(e) {
      const delta = e.deltaY > 0 ? 0.9 : 1.1;
      this.zoom(delta);
    },

    // 点击事件
    handleClick(pos) {
      this.$emit("position-click", pos);
    },
  },
};
</script>

<style scoped lang="scss">
.warehouse-wrapper {
  font-family: Arial, sans-serif;
  color: #ffb3ba;
}

.viewport {
  width: 100%;
  height: calc(100vh - 50px);
  //border: 2px solid #666;
  overflow: hidden;
  position: relative;
  background: #f5f6f7;

 
}

.shelf-container {
  position: absolute;
  transform-origin: 0 0;
  transition: transform 0.2s ease-out;
  border-bottom: 1px solid #999;

  margin: 20px;

}

.goods-item {
  position: absolute;
  // border: 1px solid #999;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  background: #ce7070;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;

  display: inline-block;
}


.goods-item2:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.item-label {
  font-size: 8px;
  color: #666;
  word-break: break-all;
 // padding: 2px;
  text-align: center;
  // background-color: red;

  line-height: 25px;
}

/* 不同类型样式 */
.type-4 {
  background: rgb(243, 188, 134);
  //  #c7e3ff;
}

.type-0 {
  background: rgb(245, 246, 247);
  // #fff;
}

.occupied {
  background: #ffb3ba !important;
}

.reserved {
  background: #fff9c4 !important;
}

.controls {
  height: 50px;
  line-height: 50px;
  //padding: 10px 0;
  //margin-bottom: 10px;
  padding: 0 0 0 10px;
}

.controls button {
  margin-right: 8px;
  padding: 4px 12px;
  cursor: pointer;
}
</style>
